<template>
  <div class="header-div__base">
    <div class="header-div__content">
      <img :src="sellerViewData.avatar" class="header-img__avatar" />
      <div class="header-div__info">
        <span class="header-span__title"></span>
        <strong class="header-strong__brand">{{ sellerViewData.name }}</strong>
        <div class="header-div__way">
          {{ sellerViewData.description }}/{{
            sellerViewData.deliveryTime
          }}分钟送达
        </div>
        <div class="header-div__discount" v-if="sellerViewData.supports">
          <icon-comp
            class="header-div__icon"
            :iconType="sellerViewData.supports[0].type"
          ></icon-comp>
          <span class="header-div__suptext">
            {{ sellerViewData.supports[0].description }}
          </span>
        </div>
        <span class="header-span__mask" @click="maskShow = true">
          {{ sellerViewData.supports ? sellerViewData.supports.length : 0 }}个<i
            class="icon-keyboard_arrow_right"
          ></i>
        </span>
      </div>
    </div>
    <div class="header-div__board">
      <div class="board-div__icon"></div>
      <span class="board-span__text" @click="maskShow = true">{{
        sellerViewData.bulletin
      }}</span>
    </div>
    <div class="header-img__bg">
      <img :src="sellerViewData.avatar" />
    </div>
    <transition name="mask-action">
      <mask-comp
        v-if="maskShow"
        @closeMask="closeMask"
        :viewData="sellerViewData"
      ></mask-comp>
    </transition>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import VueCompositionAPI, {
  defineComponent,
  reactive,
  ref,
} from "@vue/composition-api";
import { partExtend } from "./../../common/util/tool";
import { SellerSupport, SellerData } from "./../../common/globalType";
import axiosGet from "./../../common/util/request";
// import { PublicStorage } from "./../../common/util/storage"
import { storagePass, storageSetData } from "./../../common/util/storage";

import iconComp from "./../icon-comp/icon-comp.vue";
import maskComp from "./../header-mask/header-mask.vue";
Vue.use(VueCompositionAPI);

// 商家视图数据接口
interface SellerViewData {
  avatar: string;
  name: string;
  description: string;
  deliveryTime: number;
  supports?: SellerSupport[];
}

let sellerData: SellerData | null = null; // 远程请求到的商家数据
const maskShow = ref(false); // 是否展示遮罩层

function closeMask() {
  maskShow.value = false;
}

export default defineComponent({
  // 组件注册
  components: {
    iconComp,
    maskComp,
  },
  setup() {
    // 声明响应式对象
    const sellerViewData: SellerViewData = reactive({
      avatar: "",
      name: "",
      description: "",
      deliveryTime: 0,
      supports: (undefined),
    });
    // 远程请求拿到商家数据
    axiosGet("/api/seller").then((res) => {
      sellerData = res.data as SellerData;
      // 此部分数据需要跨组件传递
      const { deliveryPrice, minPrice } = sellerData;
      storagePass("deliveryData", deliveryPrice, minPrice);
      // 商家数据存入数据仓库
      storageSetData("seller", sellerData);
      // 视图数据组合表
      const keyList = [
        "avatar",
        "name",
        "description",
        "deliveryTime",
        "supports",
        "bulletin",
      ];
      // 更新视图数据
      partExtend(sellerViewData, sellerData, keyList);
    });
    // 暴露模板
    return {
      sellerViewData,
      maskShow,
      closeMask,
    };
  },
});
</script>

<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';

$brand-fontsize = 16px;
$base-color = white;
$base-bgc = rgba(7, 17, 27, 0.5);
$brand-fontweight = bold;
// @import '../../common/style/icon.styl';
$brand-lineheight = 18px;
$way-fontsize = 12px;
$way-fontweight = 200;
$way-lineheight = 12px;
$discount-fontsize = 10px;
$mask-bgc = rgba(0, 0, 0, 0.2);
$mask-height = 24px;
$mask-padding = 7px 8px;
$bg-blur = blur(5px);
$board-bgc = rgba(7, 17, 27, 0.2);

.header-div__base {
  text-align: left;
  position: relative;
  background-color: $base-bgc;
  color: $base-color;
  overflow: hidden;

  .header-div__content {
    padding: 24px 12px 18px 24px;
    position: relative;
  }

  .header-img__avatar {
    width: 64px;
    height: 64px;
    border-radius: 2px;
    vertical-align: top;
  }

  .header-div__info {
    display: inline-block;
    margin-left: 16px;

    .header-span__title {
      display: inline-block;
      width: 30px;
      height: 18px;
      background-repeat: no-repeat;
      query-bg('./brand');
    }

    .header-strong__brand {
      font-size: $brand-fontsize;
      font-weight: $brand-fontweight;
      line-height: $brand-lineheight;
      vertical-align: top;
      margin-left: 6px;
    }

    .header-div__way {
      font-size: $way-fontsize;
      font-weight: $way-fontweight;
      line-height: $way-lineheight;
      padding-top: 8px;
      padding-bottom: 10px;
    }

    .header-div__discount {
      font-size: $discount-fontsize;
      font-weight: $way-fontweight;
      line-height: $way-lineheight;

      .header-div__suptext {
        vertical-align: top;
      }
    }

    .header-span__mask {
      display: inline-block;
      font-size: $discount-fontsize;
      line-height: $way-lineheight;
      background-color: $mask-bgc;
      height: $mask-height;
      padding: $mask-padding;
      box-sizing: border-box;
      border-radius: 14px;
      position: absolute;
      right: 12px;
      bottom: 18px;

      .icon-keyboard_arrow_right {
        font-size: 10px;
        vertical-align: top;
      }
    }
  }

  .header-img__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: $bg-blur;

    img {
      width: inherit;
      height: inherit;
    }
  }

  .header-div__board {
    box-sizing: border-box;
    height: 28px;
    padding: 0 12px;
    line-height: 28px;
    font-size: $discount-fontsize;
    background-color: $board-bgc;
    user-select: none;
    white-space: nowrap;

    .board-div__icon {
      display: inline-block;
      width: 22px;
      height: 12px;
      // margin-bottom: -1px; // hack
      vertical-align: middle;
      query-bg('bulletin');
    }

    .board-span__text {
      display: inline-block;
      white-space: nowrap;
      padding-left: 4px;
      width: 95%;
      text-overflow: ellipsis;
      overflow: hidden;
      vertical-align: middle;
    }
  }

  .mask-action-enter, .mask-action-leave-to {
    opacity: 0;
  }

  .mask-action-enter-active {
    transition: opacity ease 0.3s;
  }

  .mask-action-leave-active {
    transition: opacity ease 0.5s;
  }
}
</style>
